<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				background-color: rgb(245, 245, 245);
			}
			
			.header {
				width: 1000px;
				height: 120px;
				margin: 0 auto;
				overflow: hidden;
			}
			
			.logo {
				width: 85px;
				height: 40px;
				border-right: 1px solid grey;
				float: left;
				margin-top: 40px;
			}
			
			.logo img {
				width: 80px;
			}
			
			.manage {
				width: 130px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				font-size: 20px;
				color: rgb(142, 132, 228);
				float: left;
				margin-top: 40px;
			}
			
			.middle {
				width: 1000px;
				height: 520px;
				margin: 0 auto;
				background-color: white;
				position: relative;
			}
			
			.center {
				width: 330px;
				margin: 0 auto;
				overflow: hidden;
				position: relative;
			}
			
			form>input {
				box-shadow: 1px 1px 1px 1px #CCCCCC inset
			}
			
			.new {
				width: 880px;
				height: 60px;
				border-bottom: 1px solid #CCCCCC;
				margin: 0 auto;
				text-align: center;
				line-height: 60px;
				font-size: 20px;
			}
			
			#phone {
				width: 310px;
				height: 40px;
				font-size: 16px;
				margin-top: 40px;
				padding-left: 10px;
			}
			
			#yanzheng {
				width: 190px;
				height: 40px;
				font-size: 16px;
				margin-top: 10px;
				padding-left: 10px;
			}
			
			#num,
			#pass,
			#pass_two {
				width: 310px;
				height: 40px;
				font-size: 16px;
				margin-top: 10px;
				padding-left: 10px;
			}
			
			.submit {
				width: 324px;
				height: 40px;
				background-color: rgb(117, 110, 210);
				border-radius: 5px;
				font-size: 16px;
				margin-top: 10px;
				color: white;
				font-size: 16px;
				text-align: center;
				line-height: 40px;
				cursor: pointer;
			}
			
			.submit:hover {
				background-color: rgb(140, 130, 228);
			}
			
			span {
				font-size: 12px;
			}
			
			#xieyi {
				font-size: 12px;
				color: rgb(117, 110, 210);
			}
			
			.yiyou {
				margin-right: 4px;
				margin-top: 40px;
				float: right;
				font-size: 14px;
			}
			
			.yiyou a {
				color: rgb(117, 110, 210);
				text-decoration: none;
			}
			
			.yiyou a:hover {
				text-decoration: underline;
			}
			
			.send {
				width: 90px;
				height: 30px;
				background-color: rgb(245, 245, 245);
				text-align: center;
				line-height: 30px;
				border-radius: 5px;
				color: rgb(117, 110, 210);
				position: absolute;
				right: 12px;
				top: 155px;
				cursor: pointer;
			}
			
            .num_yanzheng {
				width: 115px;
				height: 45px;
				background-color: rgb(245, 245, 245);
				text-align: center;
				font-size: 25px;
				line-height: 45px;
				position: absolute;
				right: 341px;
				top: 155px;
			}
			.zhushi {
				width: 150px;
				height: 30px;
				font-size: 14px;
				color: rgb(188, 93, 97);
				text-align: center;
				line-height: 30px;
				background-color: rgb(254, 202, 212);
				position: absolute;
				right: 185px;
				top: 105px;
				display: none;
			}
			
			.dui {
				position: absolute;
				right: 305px;
				top: 105px;
				display: none;
			}
			/*密码*/
			
			.lenght {
				width: 150px;
				height: 30px;
				font-size: 14px;
				color: rgb(188, 93, 97);
				text-align: center;
				line-height: 30px;
				background-color: rgb(254, 202, 212);
				position: absolute;
				right: 185px;
				top: 270px;
				display: none;
			}
			.different{
				width: 110px;
				height: 30px;
				font-size: 14px;
				color: rgb(188, 93, 97);
				text-align: center;
				line-height: 30px;
				background-color: rgb(254, 202, 212);
				position: absolute;
				right: 225px;
				top: 325px;
				display: none;
			}
			.send:hover {
				transition: all .5s;
				background-color: rgb(117, 110, 210);
				color: white;
			}
			
			.footer {
				font-size: 12px;
				text-align: center;
				margin-top: 50px;
			}
			
			.ruo {
				width: 60px;
				height: 30px;
				font-size: 14px;
				color: rgb(51, 103, 4);
				text-align: center;
				line-height: 30px;
				background-color: rgb(193, 237, 159);
				position: absolute;
				right: 275px;
				top: 270px;
				display: none;
			}
            .same{
				width: 80px;
				height: 30px;
				font-size: 14px;
				color: rgb(51, 103, 4);
				text-align: center;
				line-height: 30px;
				background-color: rgb(193, 237, 159);
				position: absolute;
				right: 255px;
				top: 325px;
				display: none;
			}
            .pic_yanzheng {
				color: red;
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<div class="header">
				<div class="logo"><img src="img/logo-bottom.png" /></div>
				<div class="manage">账户管理中心</div>
			</div>
			<div class="middle">
				<div class="new">注册新账户</div>
				<div class="center">

                   
						<input type="text" name="phone" id="phone" value="" placeholder="手机号码" /><br />
						<input type="text" name="" id="yanzheng" value="" placeholder="输入验证码" /><br />
						<input type="text" name="" id="num" value="" placeholder="验证码" /><br />
						<input type="password" name="pass" id="pass" value="" placeholder="输入密码" /><br />
						<input type="password" name="pass_two" id="pass_two" value="" placeholder="重复密码" /><br />
                    	<div class="pic_yanzheng">请输入图形验证码</div>
						<div class="submit">注册</div>
					
					<span>点击注册表示同意</span><a id="xieyi" href="https://account.putao.com/statics/docs/eula_cn.html"> 用户协议</a>
					<div class="yiyou"><a href="denglu.html">已经有账户?马上登录</a></div>
					<div class="send">发送验证码</div>
				</div>
				<div class="dui"><img src="img/dui.png" /></div>
				<div class="zhushi"></div>
                <div class="num_yanzheng"></div>
				<div class="lenght"></div>
				<div class="ruo"></div>
				<div class="different">两次输入不符</div>
				<div class="same">密码一致</div>
			</div>
			<div class="footer">版权所有© 2014-2016 葡萄科技</div>
		</div>
	</body>
    <script src="封装.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var phone = document.getElementById("phone");
		var sub = document.querySelector(".submit");
		var zhushi = document.querySelector(".zhushi");
		var dui = document.querySelector(".dui");
		var pass = document.getElementById("pass");
		var lenght = document.querySelector(".lenght");
		var ruo = document.querySelector(".ruo");
		var pass_two = document.getElementById("pass_two");
        var different = document.querySelector(".different");
		var same = document.querySelector(".same");
        var yanzheng = document.getElementById("yanzheng");
		var num_yanzheng = document.querySelector(".num_yanzheng");
		var pic_yanzheng = document.querySelector(".pic_yanzheng");
        

		phone.onkeydown = function() {
				zhushi.style.display = "block";
				zhushi.innerHTML = "请输入11位手机号码";
				
		}
		phone.onblur = function() {
			if (!(/^1[3|4|5|7|8]\d{9}$/.test(phone.value))) {
				zhushi.innerHTML = "手机号码有误，请重填";
			} else {
				zhushi.style.display = "none";
				dui.style.display = "block";
			}
		}
		pass.onkeydown = function() {
			lenght.style.display = "block";
			lenght.innerHTML = "密码长度为6到18位";
			if (pass.value.length == 5) {
				lenght.style.display = "none";
				ruo.style.display = "block";
				ruo.innerHTML = "强度弱";
			}
			if (pass.value.length > 5) {
				lenght.style.display = "none";
				ruo.style.display = "block";
				ruo.innerHTML = "强度中";
			}

		}

		pass_two.onkeyup=function  () {
			different.style.display = "block";
			if (pass.value == pass_two.value) {
				different.style.display = "none";
				same.style.display = "block"
			}
		}

		sub.onclick = function() {		
			if (phone.value == "") {
				zhushi.style.display = "block";
				zhushi.innerHTML = "请输入11位手机号码";
			} else if (pass.value == "") {
				lenght.style.display = "block";
				lenght.innerHTML = "密码长度为6到18位";
			}
            if (yanzheng.value == txt[0] + txt[1] + txt[2] + txt[3]) {
                    pic_yanzheng.style.display = "none";
					alert("登陆成功");
					window.location.href="denglu.php";
				} else {
					pic_yanzheng.style.display = "block";
				}
            
            if(/^1[3|4|5|7|8]\d{9}$/.test(phone.value) && pass.value.length >= 5 && pass.value == pass_two.value){
            // 按钮点击
//			"登录.php?user=111&pass=222"
				var url1 = "zhuce.php?phone="+phone.value+"&pass="+pass.value;
                console.log(phone.value);
                 console.log(url1);
				ajaxFn(url1,function(data){
                   
				});
            }

		}
        
        
        
        function random(min, max) {
			return Math.floor(Math.random() * (max - min + 1) + min);
		}
        var arr3 = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'g', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

		var txt = [];
        for (var i = 0; i < 4; i++) {
				//				arr3[random(0, 36)];
				txt.push(arr3[random(0, 35)]);
			}
		num_yanzheng.innerHTML = txt[0] + txt[1] + txt[2] + txt[3];
		num_yanzheng.onclick = function() {
            txt = [];
			for (var i = 0; i < 4; i++) {
				//				arr3[random(0, 36)];
				txt.push(arr3[random(0, 35)]);
			}
			num_yanzheng.innerHTML = txt[0] + txt[1] + txt[2] + txt[3];

//			sub.onclick = function() {
//		
//				
//			}
		}
        
        
     
	</script>

</html>